<template>
	<div class="page">
		<Head navTitle="分析师" isIndex/>
		<div class="page-container ">
			<el-row :gutter="16">
				<el-col :xs="24" :lg="12">
					<div class="bs-panel ht-panel">
						<div class="bs-panel-body" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
							<div class="analyst-hot">
								<div class="analyst-cell flex-center">
									<div class="analyst-left">
										<div class="avatar">
											<img src="../../assets/images/fenxishi.png">
										</div>
										<div class="ana-bar">胜率 Top One</div>
										<div class="ana-rank-icon"><img src="../../assets/images/rank-icon.png"></div>
									</div>
									<div class="flex_bd">
										<div class="item-row">分析赛果准确率：<span class="text-green">80%</span></div>
										<div class="item-row">
											<div class="item-label text-yellow">金牌分析师 Craig</div>
											<el-button round size="small" type="success">包赔跟投</el-button>
										</div>
									</div>
									<div class="anal-info">
										<div class="anal-cell">
											<div class="a-label">足彩分析师</div>
											<div class="a-val line-2">新东方集团培训师：越南新东方足彩管理部总监</div>
										</div>
										<div class="anal-cell">
											<div class="a-label">教育背景</div>
											<div class="a-val line-2">自2019年6月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理月起任富国瑞泽回报混合型证券投资基金经理。具有基金从业资格。</div>
										</div>
									</div>
								</div>
							</div>
							<!-- list -->
							<div class="analyst-lists">
								<div class="analyst-cell flex-center" v-for="(item,index) in list" :key="index">
									<div class="analyst-left">
										<div class="avatar">
											<img :src="item.pic">
										</div>
									</div>
									<div class="flex_bd">
										<div class="item-row">分析赛果准确率：<span class="text-green">80%</span></div>
										<div class="item-row">
											<div class="item-label text-yellow">分析师 {{item.name}}</div>
										</div>
									</div>
									<div class="anal-info">
										<div class="anal-cell">
											<div class="a-label">足彩分析师</div>
											<div class="a-val">新东方集团培训师：越南新东方足彩管理部总监</div>
										</div>
										<div class="anal-cell">
											<div class="a-label">教育背景</div>
											<div class="a-val">自2019年6月起任富国瑞泽回报混合型证券投资基金经理。具有基金从业资格。</div>
										</div>
									</div>
								</div>
							</div>
							<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
							<div class="load-more" v-if="noMore">没有更多了</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :lg="12">
					<div class="bs-panel ht-panel">
						<div class="bs-panel-body" v-infinite-scroll="load2" infinite-scroll-disabled="disabled2">
							<div class="analy-lists">
								<div class="analy-res-panel" v-for="(item,index) in gLists" :key="index">
									<div class="analy-res-body">
										<div class="analy-heading flex-center flex-zBetween">
											<div class="analy-tag">包赔赛事</div>
											<div class="analy-less">余额：9000</div>
										</div>
										<div class="game-vs">
											<div class="vs-title">奥运男足</div>
											<div class="vs-flex flex-center flex-hc">
												<div class="vs-title">神户胜利船shenghushenglichuan</div>
												<div class="vs-card_bd">
													<div class="vs-value">反波胆 <span class="score">0-1</span></div>
													<div class="vs-time">2021 04-21 04:00</div>
												</div>
												<div class="vs-title">德岛漩涡dedaoxuanwo</div>
											</div>
										</div>
									</div>
									<div class="analy-footer flex-center flex-zBetween">
										<div class="text-tip">注：包赔投注如果投中，两个工作日退还本金</div>
										<div class="analy-select-bar flex-center justify-center">
											<div class="analy-select-btns flex-center">
												<el-radio-group v-model="item.radioPrice" >
													<el-radio v-for="(item,index) in item.selectPrice" :label="item" :key="index" border>{{item.text}}</el-radio>
												</el-radio-group>
												<div class="set-icon" @click="dialogVisible = true"><span class="iconfont icon-shezhi"></span></div>
											</div>
											<div class="select-action-box flex-center">
												<el-input @input="gameInput($event,index)" v-model="item.diyValue" placeholder="自定义"></el-input>
												<el-button  type="warning">包赔跟投</el-button>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="load-more" v-if="loading2"><i class="el-icon-loading"></i> 加载中...</div>
							<div class="load-more" v-if="noMore2">没有更多了</div>
						</div>
					</div>
				</el-col>
			</el-row>
			
		</div>
		<!-- 设置跟投金额 -->
		<el-dialog custom-class="bs-dialog bs-bg-dialog" title="设置跟投金额" :visible.sync="dialogVisible" width="620px" >
			<div class="bs-val-form">
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="第一 设定值diyishedingzhi：">
						<el-input v-model="form.value1" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value2" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value3" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer flex">
				<div class="col">
					<el-button type="info" @click="dialogVisible = false">取 消</el-button>
				</div>
				<div class="col">
					<el-button type="success" @click="dialogVisible = false">确 定</el-button>
				</div>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				list: [{
						name: 'Addie Gardner',
						pic: require('../../assets/images/people1.png'),
					},{
						name: 'Noah Cooper',
						pic: require('../../assets/images/people2.png'),
					},{
						name: 'Minnie Carter',
						pic: require('../../assets/images/people3.png'),
					},{
						name: 'Eva Kim',
						pic: require('../../assets/images/people1.png'),
					},{
						name: 'Addie Gardner',
						pic: require('../../assets/images/people1.png'),
					}
				],
				count: 4,
				loading: false,
				gLists:[{
					radioPrice:'',
					diyValue:'',
					selectPrice: [{
							"value": 100,
							"text": "100"
						},
						{
							"value": 500,
							"text": "500",
						},
						{
							"value": 900,
							"text": "900"
						}
					]
				},{
					radioPrice:'',
					diyValue:'',
					selectPrice: [{
							"value": 100,
							"text": "100"
						},
						{
							"value": 500,
							"text": "500",
						},
						{
							"value": 900,
							"text": "900"
						}
					]
				},{
					radioPrice:'',
					diyValue:'',
					selectPrice: [{
							"value": 100,
							"text": "100"
						},
						{
							"value": 500,
							"text": "500",
						},
						{
							"value": 900,
							"text": "900"
						}
					]
				}],
				list2: [1,2,3,4,5,6],
				count2: 4,
				loading2: false,
				// 弹出
				dialogVisible:false,
				form: {
					value1: '',
					value2: '',
					value3: '',
				}
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			},
			noMore2() {
				return this.count2 >= 20
			},
			disabled2() {
				return this.loading2 || this.noMore2
			}
		},
		mounted() {},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 5; i++) {
						this.list.push({
							name: 'Addie Gardner',
							pic: require('../../assets/images/people1.png'),
						});
					}
					this.loading = false
				}, 1000)
			},
			load2() {
				this.loading2 = true
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.gLists.push({
							radioPrice:'',
							diyValue:'',
							selectPrice: [{
									"value": 100,
									"text": "100"
								},
								{
									"value": 500,
									"text": "500",
								},
								{
									"value": 900,
									"text": "900"
								}
							]
						});
					}
					this.loading2 = false
				}, 1000)
			},
			gameInput(e,index){
				console.log('input:',e);
				console.log('1:',index);
				this.gLists[index].radioPrice = -9   // 827
			},
		}
	}
</script>
